<template>
	<view>
		<z-paging>
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<view class=" pb20 pl30" style="width: 280rpx;">
					<u-button @click="handleAdd" type="success" plain text="新增绑定信息"></u-button>
				</view>
			</template>
			
			
			<view class="pt30 content">
				<view class="flex item">
					<view class="bold"  style="flex: 1;">
						角色名称
					</view>
					<view class="bold"  style="flex: 1;">
						绑定工序列
					</view>
					<view class="bold" style="flex: 1;">
						绑定具体工序
					</view>
					<view class="bold" style="flex: 1;">
						操作
					</view>
				</view>
				<view class="flex item" v-for="(item, index) in dataList" :key="index">
					<view class=""  style="flex: 1; text-align: center;">
						{{ item.roleName || '' }}
					</view>
					<view class=""  style="flex: 1; text-align: center;">
						{{ item.orderOperation || '' }}
					</view>
					<view class="" style="flex: 1; text-align: center;">
						{{ item.processName || '' }}
					</view>
					<view class="" style="flex: 1; text-align: center;">
						<view class="jCenter aCenter" style="height: 85rpx;">
							<u-icon size="24" @click="handleDelete(item)" color="red" name="trash-fill"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		
		
		<u-modal :show="show" @confirm="handleConfirm" @cancel="show = false" title="提示" showCancelButton content='你确定要删除该权限吗？'></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				show: false,
				rowItem: {},
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			async handleConfirm() {
				try {
					const data = await this.$api.deletePermissionList({
						id: this.rowItem.id
					})
					
					this.$msg.success('删除成功!')
					this.getList()
					this.show = false
				} catch (error) {
					//TODO handle the exception
					this.show = false
				}
			},
			handleDelete(item) {
				this.rowItem = item
				this.show = true
			},
			handleAdd() {
				uni.navigateTo({
					url: '/pagesIndex/allocate/allocate'
				})
			},
			async getList() {
				try {
					const {data} = await this.$api.getPermissionList()
					this.dataList = data
				} catch (error) {
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.content {
	background-color: #FFF;
}

.bold {
	font-weight: bold;
	text-align: center;
}

.item {
	// height: 85rpx;
	line-height: 85rpx;
	border-bottom: 1rpx solid #BBBBBB;
}
</style>
